import { reqGetHospitalShow } from '@/api/hospital/hospitalList';
import { HospitalShowType } from '@/api/hospital/model/hostpitalListTypes';
import { Button, Card, Descriptions } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalShow() {

  //获取 url id
  let {id} = useParams();
  //获取详情数据  状态
  let [hospital,setHospital] = useState<HospitalShowType>();
  //编程式路由
  let navigate = useNavigate();

  //请求初始化数据
  useEffect(()=>{
    async function main(){
      //请求医院详情api
      let result = await reqGetHospitalShow(id as string);
      //设置医院数据状态
      setHospital(result); 
    }
    main()
  },[])

  return (
    <>
            <Card>
            <Descriptions title="基本信息" bordered>
                <Descriptions.Item style={{width:150}} label="医院名称" span={1}>{hospital?.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo" span={2}>
                  {
                    hospital && <img width="100px" src={`data:image/jpeg;base64,${hospital?.hospital.logoData  }`} alt="" />
                  }
                   
                </Descriptions.Item>
                <Descriptions.Item label="医院编码" span={1}>{hospital?.hospital.hoscode}</Descriptions.Item>
                <Descriptions.Item label="医院地址" span={2}>{hospital?.hospital.param.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={3}>
                {hospital?.hospital.route}
                </Descriptions.Item>
                <Descriptions.Item label="医院简介" span={3}>{hospital?.hospital.intro}</Descriptions.Item>
            </Descriptions>

            <Descriptions className='mt' title="预约规则信息" bordered>
                <Descriptions.Item label="预约周期" span={1}>{hospital?.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间" span={2}>{hospital?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间" span={1}>{hospital?.bookingRule.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间" span={2}>{hospital?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={3}>
                    {
                        hospital?.bookingRule.rule.map((item,index)=>{
                            return <p key={index}>{item}</p>
                        })
                    }
                </Descriptions.Item>
            </Descriptions>

            <Button className='mt' type="default" onClick={()=>{
                navigate(-1);
            }}>返回</Button>        

            </Card>


        </>
  )
}
